<template>
    <div class="sideBar-container">
        <div class="logo">
            <img src="../../assets/logo.png" alt="">
            <n-gradient-text :size="24" type="info">酒店管理系统</n-gradient-text>
        </div>
        <n-menu
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          >
          </n-menu>
    </div>
</template>

<script setup lang="ts">
import { Component, h } from 'vue';
import {
  BookOutline as BookIcon,
} from '@vicons/ionicons5'
import { RouterLink } from 'vue-router';
import {
    NIcon, MenuOption 
} from 'naive-ui'

function renderIcon (icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions: MenuOption[] = [
  {
    label: () => h(
      RouterLink,
      {
        to: {
          name: "RoomManage"
        }
      },
      {default: () => "房间管理"}
    ),
    key: 'hear-the-wind-sing',
    icon: renderIcon(BookIcon)
  },
]
</script>
<style lang="less" scoped>
.sideBar-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .logo img {
        height: 30px;
        width: 30px;
    }
}
</style>